//切换表单
/* const btn = document.querySelector('.changebutton')
btn.addEventListener('click', function () {
  const register = document.querySelector('.register')
  const login = document.querySelector('.login')
  // 隐藏登陆表单
}) */

/*   原生版本   */

// 获取所有的a标签 
const btns = document.querySelectorAll('a')
// 给所有的a标签添加点击事件 
for (let i = 0; i < btns.length; i++) {
  const item = btns[i]
  item.addEventListener('click', function () {
    // 获取所有box的class 
    const box = document.querySelectorAll('.box')
    // 切换所有box的class 
    for (let j = 0; j < box.length; j++) {
      box[j].classList.toggle('show')
    }
  })
}
// 面试题 let 0 1  var 2 2  变量提升

/*  jquery版本  */

// $('a').click(function () {
//   $('.box').toggle()
// })

// 注册
//表单验证
//校验规则
const validate = {
  fields: {
    username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
      validators: {
        notEmpty: { //不能为空
          message: '用户名不能为空.'
        },
        stringLength: { //检测长度
          min: 2,
          max: 15,
          message: '用户名需要2~15个字符'
        }
      }
    },
    password: {
      validators: {
        notEmpty: {
          message: '密码不能为空'
        },
        stringLength: { //检测长度
          min: 6,
          max: 15,
          message: '密码需要6~15个字符'
        }
      }
    }
  }
}

//监听表单事件
// 语法：
// $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}

// 比如，注册
$('.register form').bootstrapValidator(validate).on('success.form.bv', function (e) {
  //阻止from默认行为
  e.preventDefault();
  //注册参数 输入用户名和密码
  const data = $(this).serialize()
  // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
  axios.post('/api/register', data)
    .then(({
      data
    }) => {
      //判断是否注册成公
      if (data.code === 0) {
        //成功 清空注册表单 利用form Dom对象的reset方法
        this.reset()
        //切换到登陆表单  利用模拟a标签的点击事件实现切换
        const a = document.querySelector('.go-login')
        a.click()
        //打开弹窗提示成功
        toastr.success(data.message)
      }
    })
});

//登陆页面
//监听表单校验成功和提交事件
$('.login form').bootstrapValidator(validate).on('success.form.bv', function (e) {
  e.preventDefault();
  //登陆请求
  const data = $(this).serialize()
  axios.post('/api/login', data)
    .then(({
      data
    }) => {
      //判断登陆成功
      if (data.code === 0) {
        // token 是登陆凭证 ，作用是访问其他需要登陆后请求的接口凭证
        // 保存到本地   setItem('参数1', 参数2)
        localStorage.setItem('token', data.token)
        //  跳转页面 
        location.href = './index.html'
      }
    })
})